<template>
    <div style="line-height: 50px">
        <el-page-header content="我的余额">
        </el-page-header>
        <el-divider></el-divider>
        <el-card class="box-card">
            <div style="line-height: 50px;">
                <span>当前余额：</span>
                <span v-if="bool" >{{money}}元</span>
                <el-button plain @click="query">点击查询</el-button>
                余额不足？
                <el-button type="success" round @click="dialogVisible = true">我要充值</el-button>
            </div>
        </el-card>
        <el-dialog
            title="在线充值"
            :visible.sync="dialogVisible"
            width="30%"
            :after-close="handleClose">
            <el-tabs type="border-card">
                <el-tab-pane label="微信支付">
                    <el-row>
                        <el-col :span="6">                        
                            充值金额：
                        </el-col>
                        <el-col :span="12">
                            <el-input v-model="input" placeholder="请输入内容"></el-input>
                        </el-col>
                        <el-button type="primary" @click="ZFBVisible = true">确 定</el-button>
                    </el-row>
                    <el-dialog
                        width="30%"
                        title="微信支付页面"
                        :visible.sync="WXVisible"
                        append-to-body>
                         <el-image
                            style="width: 100%; height: 100%"
                            src="https://rcdemo1.oss-cn-chengdu.aliyuncs.com/QQ%E5%9B%BE%E7%89%8720210515150651.jpg"
                            fit="fill"></el-image>
                    </el-dialog>
                </el-tab-pane>
                <el-tab-pane label="支付宝支付">
                   <el-row>
                        <el-col :span="6">                        
                            充值金额：
                        </el-col>
                        <el-col :span="12">
                            <el-input v-model="input" placeholder="请输入内容"></el-input>
                        </el-col>
                        <el-button type="primary" @click="WXVisible = true">确 定</el-button>
                    </el-row>
                    <el-dialog
                        width="30%"
                        title="支付宝支付页面"
                        :visible.sync="ZFBVisible"
                        append-to-body>
                        <el-image
                            style="width: 100%; height: 100%"
                            src="https://rcdemo1.oss-cn-chengdu.aliyuncs.com/QQ%E5%9B%BE%E7%89%8720210515150646.jpg"
                            fit="fill"></el-image>
                    </el-dialog>
                </el-tab-pane>
            </el-tabs>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
        
    </div>
</template>

<script>
export default {
    name:"userbalance",
    data(){
        return{
            money:100,
            bool:false,
            dialogVisible: false,
            WXVisible: false,
            ZFBVisible: false,
            input:""
        }
    },
    methods: {
        query(){
            this.bool = true
        },
         handleClose() {
            this.money = this.input;
        }
    }
}
</script>